import React, { Component } from 'react';
import logo from './logo.svg';
import Swiper from 'react-id-swiper';
import './App.css';
import "./css/swiper.css";
import { bannerConfig } from "./config/banner.js"
import { list } from "./config/list.js"
import { recordList } from "./config/record.js"

class App extends Component {
    constructor(props) {
        super(props);
    }

    //banner轮播参数
    bannerSwiperParams = {
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        }
    }
    //记录轮播参数
    recordListParams = {
        loop: true,
        direction: 'vertical',
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },

    }


    render() {
        return (
            <article className="App">
                <header className="header">
                    {bannerConfig && bannerConfig.length ? <Swiper {...this.bannerSwiperParams}>
                        {
                            bannerConfig.map((item, index) => {
                                return <div style={{ backgroundImage: `url(${item.image})` }} key={`banner${index}`} ><a href={item.jumpLink}></a></div>
                            })
                        }
                    </Swiper> : null}
                </header>

                <main className="main">
                    <ul className="recordList">
                        {recordList && recordList.length ? <Swiper {...this.recordListParams}>
                            {
                                recordList.map((item, index) => {
                                    return <li key={`recorde${index}`}>{item}</li>
                                })
                            }
                        </Swiper> : null}
                    </ul>
                    <ul className="list">
                        {
                            list.map((item, index) => {
                                return <li className="item" key={`list${index}`} ><a href={item.jumpLink} >
                                    <div className="image"><img src={item.image} alt="" /></div>
                                    <div className="name">{item.name}</div>
                                </a></li>
                            })
                        }
                    </ul>
                </main>

            </article>
        );
    }
}

export default App;
